カラフルボックスでのNext.jsアプリのnproc問題をReactで解決した話

6月 9, 2025

React, カラフルボックス React, アプリ, カラフルボックス, 備忘

カラフルボックスでのNext.jsアプリのnproc問題をReactで解決した話

こんにちは！今回は、私がレンタルサーバーのカラフルボックスでNext.jsアプリケーションを運用しようとした際に直面した「nproc占有問題」と、その解決策としてReact（Create React Appなど）ベースのアプリケーションに切り替えた経緯についてお話しします。

きっかけ：レンタルサーバーでのNext.jsアプリ運用

手軽にWebアプリケーションを公開したいと考え、使い慣れたカラフルボックスでNext.jsアプリを動かそうとしました。Next.jsはそのままだとNode.jsサーバーとして動作するため、カラフルボックスのNode.js環境を利用してデプロイを試みました。

カラフルボックスでReact+nextアプリを実行する際の問題点

発生した問題：nprocが占有され、アプリが停止する

デプロイ自体は成功し、最初は問題なく動作しているように見えました。しかし、しばらくするとアプリケーションにアクセスできなくなる現象が発生。サーバーの管理画面でリソース状況を確認すると、**nproc（ユーザーが起動できるプロセス数の上限）**が上限に達し、新たなプロセスを起動できなくなっていたのです。

Next.jsはビルド時やリクエスト処理時に内部で多くのプロセスを生成することがあり、特に共有レンタルサーバーのようなリソースに制限がある環境では、このnproc制限に抵触しやすいようです。一度占有されたnprocはなかなか解放されず、アプリケーションが実質的に停止してしまう状態でした。

解決策：Next.jsからReact（SPA）への移行

この問題を解決するために、いくつかのアプローチを検討しました。

Next.jsの設定調整: プロセス数を抑えるような設定がないか探しましたが、根本的な解決には至りませんでした。
サーバープランの変更: より上位のプランに変更すればnprocの上限も上がるかもしれませんが、コスト増は避けたいところです。
アプリケーション構成の見直し: ここで、Next.jsのSSR（サーバーサイドレンダリング）やSSG（静的サイトジェネレーション）の恩恵が必須ではない小規模なアプリケーションであったため、クライアントサイドレンダリング（CSR）中心のReactアプリケーション（例: Create React Appで作成するようなSPA）への移行を考えました。

最終的に、**Reactのみの静的なシングルページアプリケーション（SPA）**としてビルドし、それを静的ファイルとしてホスティングする形に変更することにしました。

参考にした情報と具体的な設置手順

Reactアプリのビルドとレンタルサーバーへの設置にあたっては、以下の記事を参考にさせていただきました。非常に分かりやすく、スムーズに作業を進めることができました。

ReactアプリをXserverに設置する方法（サブディレクトリ編） – Qiita

この記事で解説されているように、基本的な手順は以下の通りです。

Reactプロジェクトのビルド: ローカル環境でReactプロジェクトのルートディレクトリで以下のコマンドを実行し、配信用ファイル一式を生成します。npm run buildこれにより、build (または dist) フォルダが作成されます。
サーバーへのアップロード: 生成された build フォルダの中身全て（index.htmlやstaticフォルダなど）を、レンタルサーバーの公開したいディレクトリ（例: public_html/react-app/など）にFTPクライアントなどを使ってアップロードします。
.htaccessによるルーティング設定: SPAの場合、ブラウザのURL直接アクセス時やリロード時にも index.html を表示させ、React Routerなどのクライアントサイドルーティングが正しく機能するように設定する必要があります。アップロードしたディレクトリのルート（上記例では public_html/react-app/）に、以下の内容で .htaccess ファイルを作成・設置します。

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase / # サブディレクトリに設置した場合は、そのパスに変更 (例: /react-app/)
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L] # サブディレクトリに設置した場合は、そのパスに変更 (例: /react-app/index.html)
</IfModule>

注意点:

RewriteBase と RewriteRule の最後の行のパスは、アプリケーションを設置するディレクトリに合わせて適宜変更してください。例えば、https://example.com/my-react-app/ でアクセスさせたい場合は、RewriteBase /my-react-app/ と RewriteRule . /my-react-app/index.html [L] のようになります。ドキュメントルート直下に設置する場合は、提示された内容のままで問題ありません。